<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'product.add'">创建
    </el-button>
    <div class="filter-container">
      <el-input style="width: 250px" placeholder="请输入型号代码" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.querystring.cqst_finishedproduct_code">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'product.edit'">编辑</a>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)" v-permission="'product.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'product',
  data: function () {
    return {
      api: this.$api.massList,
      apiDelete: this.$api.massList + 'del',
      name: '产品SPEC',
      tableProps: {
        border: true,
        opsColWith: 85,
      },
      formProps: {
        title: '创建检测项目',
      },
      query: {
        page: 1,
        size: 10,
        querystring: {},
      },
      itemstaySelect: [
        { value: '判定类', label: '判定类' },
        { value: '数值类', label: '数值类' },
      ],
      columns: [
        { title: '成品型号', key: 'cqst_finishedproduct_code' },
        { title: 'Item代码', key: 'cqst_item_code' },
        { title: 'Item名称', key: 'cqst_item_name' },
        { title: 'Item类型', key: 'cqst_itemstay' },
        { title: 'SPEC', key: 'cqst_spec' },
        { title: '上限', key: 'cqst_upperlimit' },
        { title: '下限', key: 'cqst_lowerlimit' },
        { title: '单位', key: 'cqst_unit' },
        { title: '备注', key: 'cqst_remarks' },
        { title: '最后修改人', key: 'modify_user' },
        { title: '最后修改时间', key: 'modify_time' },
      ],
      fields: [
        {
          title: '成品型号',
          key: 'cqst_finishedproduct_code',
          name: 'select',
          options: [],
          required: true,
          props: { filterable: true },
        },
        { title: '检测Item代码', key: 'cqst_item_code', name: 'select', options: [], required: true, props: {} },
        { title: '检测Item名称', key: 'cqst_item_name', name: 'select', options: [], required: true, props: {} },
        { title: '检测Item类型', key: 'cqst_itemstay', name: 'select', options: [], required: true, props: {} },
        { title: 'SPEC', key: 'cqst_spec', name: 'number', props: { controls: false } },
        { title: '上限', key: 'cqst_upperlimit', name: 'number', props: { controls: false } },
        { title: '下限', key: 'cqst_lowerlimit', name: 'number', props: { controls: false } },
        { title: '单位', key: 'cqst_unit' },
      ],
    }
  },
  created: function () {
    this.getList()

    //item代码  类型
    this.$request(this.$api.dictionary + 'getdirectchildren', {
      parentType: 'quality_spec_items',
      size: 999,
      page: 1,
    }).then((r) => {
      this.setFieldOptions('cqst_item_code', r, 'value', ['value', 'label'])
      this.setFieldOptions('cqst_item_name', r, 'label', 'label')
    })
    //成品型号
    this.$request(this.$api.mat + 'getlist_v10', { page: 1, size: 999, category: 2 }).then((r) => {
      console.log(r)
      this.setFieldOptions('cqst_finishedproduct_code', r.list, 'key_part_no', ['key_part_no', 'key_part_name'])
    })
    //item类型
    this.setFieldOptions('cqst_itemstay', this.itemstaySelect, 'value', 'label')
  },
  watch: {
    data(val) {
      this.getFieldConfig('cqst_finishedproduct_code').props.disabled = !!val.id
      this.getFieldConfig('cqst_item_code').props.disabled = !!val.id
      this.getFieldConfig('cqst_item_name').props.disabled = !!val.id
      this.getFieldConfig('cqst_itemstay').props.disabled = !!val.id
    },
  },
  methods: {
    editItem(v) {
      this.pageLoading = true
      let url = this.api + 'GetById'
      this.$request(url, {
        vid: v.id,
      })
        .then((r) => {
          console.log(r)
          this.data = this.formatAfterGet(r)
          this.editFormVisible = true
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    submit() {
      console.log(this.data)
      if (this.data.cqst_itemstay === '数值类') {
        if (!this.data.cqst_lowerlimit || !this.data.cqst_spec || !this.data.cqst_unit || !this.data.cqst_upperlimit) {
          this.$message.error('当Item类型为 “数值类”时，那么 SPEC、上限、下限、单位，都不能为空')
          return false
        }
      }
      let url = this.$api.massList + 'inorup'
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, data)
      if (!check) return
      this.submitLoading = true
      this.$request(url, data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>
<style scoped lang='scss'>
::v-deep .is-without-controls {
  width: 100%;
  input {
    text-align: left;
  }
}
</style>